import React from 'react';
import { Table, Divider, Modal } from 'antd';
import Page from 'components/common/Page';
import { model } from 'utils/model';
import SearchBar from './SearchBar';
import AddModal from './Modals/AddModal';
import fields from './fields';

@model('monitorManage')
class MonitorManage extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.state = {
      visible: false,
      myChart: null,
      record: {},
      row: {},
      monitorData: props.monitorData || {}
    };
    this.settingHandler = this.settingHandler.bind(this);
  }

  componentDidMount() {
    // var myChart = echarts.init(document.getElementById('main'));
    // this.setState({ myChart });
  }
//   componentWillReceiveProps(next){
//     //   const { myChart } = this.state;
//     //   if(next.monitorData !== this.props.monitorData){
//     //       const option = initOption(next.monitorData);
//     //       myChart.setOption(option);
//     //   }
//   }
opt(del, params) {
  Modal.confirm({
    title: '你确定要执行此操作？',
    cancelText: '取消',
    okText: '确定',
    onOk() {
      del(params);
    }
  });
}
// 扩展字段
  extraFields() {
    const { del } = this.props;
    const settingHandler = this.settingHandler;
    const opt = this.opt;
    const extra = [
      {
        title: '操作',
        key: 'action',
        width: 250,
        fixed: 'right',
        render: (text, row) => (
          <span>
            <a href="javascript:;" onClick={() => settingHandler({ 'visAdd': true, 'row': row })}>修改</a>
            <Divider type="vertical" />
            <a href="javascript:;" onClick={() => opt(del, {id: row.id})}>删除</a>
          </span>
        )
      }
    ];
    return fields.concat(extra);
  }
  settingHandler(params) {
    this.setState(params);
  }
  
  render() {
    const { 
        add,
        edit,
        search,
        config,
        goPage,
        getList,
        loading,
        typeList,
        tempList,
        updateState,
        templateList,
        dataTemplateId,
        // updateSearch,
        getTemplateList,
        queryDataTemplateItems
    } = this.props;
    const searchProps = {
        search,
        getList,
        tempList,
        updateState,
        dataTemplateId,
        updatePerant: params => this.setState(params),
        openVis: (record) => this.settingHandler({'visAdd': true, 'record': record}),
        getTemplateList,
        onSearch: (params) => {
            // updateSearch(params);
            getList(params);
        }
    };
    const { visAdd, record, row } = this.state;
    const { pagination, list } = config;
    const tableProps = {
        pagination: {
          ...pagination,
          onChange: (current) => {
            goPage(current);
            getList();
          }
        },
        // scroll: {
        //     x: 1600
        // },
        loading: loading.list,
        rowKey: (record, index) => index,
        dataSource: list,
        columns: this.extraFields()
      };
      const addProps = {
        row,
        record,
        getList,
        typeList,
        templateList,
        loading: loading.add,
        queryDataTemplateItems,
        onCancel: () => this.settingHandler({ 'visAdd': false, row: {} }),
        onOK: row.id ? edit : add
      };
    return (
      <Page inner>
        <div>
          <SearchBar {...searchProps} />
          <Table {...tableProps} style={{marginTop: 20}} />
          { visAdd && <AddModal {...addProps} /> }
        </div>
      </Page>
    );
  }
}


export default MonitorManage;
